<template>
  <div class="learn">
    <van-nav-bar
      title="已购课程"
    ></van-nav-bar>

    <!--    课程列表  -->
    <div class="course-content-list">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
      >
        <van-cell
          v-for="item in courseList"
          :key="item.id"
          @click="handleClick(item)"
        >
          <img :src="item.image">
          <div class="course-info">
            <h3 v-text="item.name"></h3>
            <p class="info" v-text="item.previewFirstField"></p>
          </div>
        </van-cell>
      </van-list>
    </div>

    <layout-footer></layout-footer>
  </div>
</template>

<script>
  import LayoutFooter from '@/components/LayoutFooter'
  import { getPurchaseCourse } from '@/services/course'

  export default {
    name: 'Learn',
    components: {
      LayoutFooter,
    },
    data() {
      return {
        courseList: [],
        loading: false,
        finished: false,
      }
    },
    created() {
      this.loadCourseList()
    },
    methods: {
      async loadCourseList() {
        this.loading = true
        const { content } = await getPurchaseCourse()
        this.courseList = content
        this.loading = false
        this.finished = true
      },
      handleClick(item) {
        this.$router.push({
          name: 'course-info',
          params: {
            courseId: item.id,
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .course-content-list {
    position: fixed;
    top: 46px;
    bottom: 50px;
    left: 0;
    right: 0;
    overflow-y: auto;

    .van-cell__value {
      display: flex;
      padding: 10px 0;

      img {
        width: 75px;
        height: 100px;
      }

      h3, p {
        margin: 0;
        padding: 0;
      }

      .course-info {
        height: 100px;
        padding: 0 10px;
        flex: 1;
        display: flex;
        flex-direction: column;

        .info {
          flex: 1;
        }
      }
    }
  }
</style>
